<!-- MAIN CONTENT -->
<div id="content">

    <div class="row">
        <big-breadcrumbs items="['Charts', 'Morris Chart']" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        <div smart-include="/app/layout/partials/sub-header.tpl.html"></div>
    </div>
    <!-- widget grid -->
    <section id="widget-grid" widget-grid>

        <!-- row -->

        <div class="row">

            <article class="col-sm-12 col-md-12 col-lg-12">


                <div jarvis-widget id="morris-sales-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                        <h2>Sales Graphs</h2>
                    </header>
                    <div>
                        <div class="widget-body no-padding">
                            <morris-sales-graph></morris-sales-graph>
                        </div>
                    </div>
                </div>

            </article>


            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-area-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Area Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-area-graph></morris-area-graph>
                        </div>
                    </div>
                </div>

            </article>


            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-bar-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Bar Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-bar-graph></morris-bar-graph>
                        </div>
                    </div>
                </div>

            </article>



            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-normal-bar-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Normal Bar Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-normal-bar-graph></morris-normal-bar-graph>
                        </div>
                    </div>
                </div>

            </article>


            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-stacked-bar-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Stacked Bar Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-stacked-bar-graph></morris-stacked-bar-graph>
                        </div>
                    </div>
                </div>

            </article>



            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-year-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Year Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-year-graph></morris-year-graph>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-donut-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Donut Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-donut-graph></morris-donut-graph>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-time-graph-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Time Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-time-graph></morris-time-graph>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-line-graph-a-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Line Graph A</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-line-graph-a></morris-line-graph-a>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-line-graph-b-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Line Graph B</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-line-graph-b></morris-line-graph-b>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-6">

                <div jarvis-widget id="morris-no-grid-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>No Grid Graph</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-no-grid-graph></morris-no-grid-graph>
                        </div>
                    </div>
                </div>

            </article>

            <article class="col-xs-12 col-sm-12">

                <div jarvis-widget id="morris-line-graph-c-widget" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>

                        <h2>Line Graph C</h2>
                    </header>

                    <div>
                        <div class="widget-body no-padding">
                            <morris-line-graph-c></morris-line-graph-c>
                        </div>
                    </div>
                </div>

            </article>



        </div>

        <!-- end row -->

    </section>
    <!-- end widget grid -->

</div>
<!-- END MAIN CONTENT -->
